<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性VS监听属性</title>
  <style>
    #root {
      width: 200px;
      height: 100px;
      background-color: pink;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    #root2 {
      width: 200px;
      height: 100px;
      background-color: pink;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  </style>
  <script src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
  <label>
    姓<input type="text" v-model="firstName">
  </label>
  <label>
    名<input type="text" v-model="lastName">
  </label>
  <div>你的全名是:<span>{{fullName}}</span></div>
</div>
<br>
<br>
<div id="root2">
  <label>
    姓<input type="text" v-model="firstName2">
  </label>
  <label>
    名<input type="text" v-model="lastName2">
  </label>
  <div>你的全名是:<span>{{fullName2}}</span></div>
</div>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      firstName: '张',
      lastName: '三',
    },
    computed:{
      fullName(){
        return this.firstName+'-'+this.lastName
      }
    }

  })

  const vm2=new Vue({
    el:'#root2',
    data: {
      firstName2: '张',
      lastName2:'三',
      fullName2: '张-三'
    },
    watch:{
      firstName2(val){
        setTimeout(()=>{this.fullName2=val+this.lastName2},1000)

      },
      lastName2(val){
        setTimeout(()=>{this.fullName2=this.firstName2+val},1000)


      }
    }
  })

  /**
   * computed能完成的功能，watch都可以完成
   * watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
   *
   * 注意事项:
   *  所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象
   *  所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。
   */
</script>
</body>
</html>